<template>
    <div class="random-container">
        <div class="item">随便看看</div>
        <div class="list">
            <div class="randomList" v-for="(temp,index) in hotList" :key="index" @click="checked(temp)">
                <div class="random" >
                    <img class="menuPic" :src="transfromCover(temp.poster)" fit="cover">
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
// api
import { searchHot } from "@/api/miva";
export default {
 data() {
    return {
      hotList: []
    };
  },
  async mounted() {
    await this.getHot();
  },
  methods: {
    checked(value) {
      // this.show = true;
      // this.nowCheck = value;
      const obj = {
        1: "html5",
        2: "longPic",
        3: "poster",
        4: "video"
      };
      console.log(value);
      if (value.type < 5) {
        this.$store.commit("SETTING_MASK", {
          type: obj[value.type],
          data: value
        });
      } else {
        console.log("这是专题");
        this.$router.push({ name: "details", params: { value } });
      }
    },
    transfromCover(value) {
      if (value instanceof Array) {
        return value;
      }
      return value ? value.split(",")[0] : [];
    },
    async getHot() {
      const res = await searchHot();
      this.hotList = res.data;
    }
  }
};
</script>

<style lang="less">
.random-container{
    width:100%;
    margin-bottom: 5%;
    .item{
        font-size: 16px;
        padding: 10px 0;
        color: #606060;
    }
    .list{
         display: flex;
         overflow-x: scroll;
        .randomList{
            width: auto;
            margin: 10px 20px 20px 0;
        .random{
            width: 173px;
            height: 123px;
            // border: 1px solid;
            overflow: hidden;
            display: flex;
            overflow-x: scroll;
            .menuPic{
                height: 190px;
                width: 100%;
                overflow: hidden;
               
            }
        }
    }
    }
    
}
</style>